<ui:composition template="../template/plantilla_01.xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

    <ui:define name="loginUsuario">

    </ui:define>

    <ui:define name="panelCentral">

            <h:form id="formulario">

                <p:panel id="pnlLogin"  header="Login usuario"
                         style="width: 500px; margin: auto; margin-top: 80px; margin-bottom: 80px; ">

                    <p:messages id="msgs" showDetail="false"/>
                    <h:panelGroup rendered="#{usuarioSession.muestroMensajeExpirado}">
                        <div class="ui-messages ui-widget">
                            <div class="ui-messages-info ui-corner-all">
                                <span class="ui-messages-info-icon"></span>
                                <ul>
                                    <li>
                                        <span class="ui-messages-error-summary">Su sesión en nuestra plataforma ha finalizado</span>
                                    </li>
                                    <li>
                                        <span class="ui-messages-error-summary">Vuelva a ingresar por favor</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </h:panelGroup>

                    <h:panelGrid columns="2">

                        <h:graphicImage value="http://www.intercap.com.ar/imagenes/iconos/login.png" height="75" width="75" />

                        <h:panelGrid columns="2">
                            <h:outputText value="Usuario:" />
                            <p:inputText id="txtUsuario" value="#{usuarioSessionBean.usuario.nombre}"
                                         required="true"  requiredMessage="El usuario es obligatorio" size="30"  >
                                <f:validateLength minimum="4" maximum="20" />
                            </p:inputText>

                            <h:outputText id="lblContrasenia" value="Clave:" />
                            <p:password value="#{usuarioSessionBean.usuario.password}" feedback="false"
                                        maxlength="20" required="true"
                                        requiredMessage="La clave es obligatoria" size="30"  />

                        </h:panelGrid>

                     </h:panelGrid>

                    <div style="text-align: center">

                        <p:commandButton id="btnLogin" value="Ingresar"
                                         icon="ok16" ajax="false"
                                         action="#{usuarioSessionBean.login}"  />
                        
                        <p:commandButton value="Olvidé mi clave"
                                         icon="info16" immediate="true"
                                         action="#{usuarioSessionBean.verRecuperarPassword}" />

                    </div>

                </p:panel>

                <p:spacer width="900" height="170"  />

            </h:form>

    </ui:define>

</ui:composition>